<template>
  <div class="app-container">
    <div id="" class="header">
      <div id="" class="title_search">
        <el-input class="search_input" v-model="req_xin_xi.keyword" placeholder="搜索关键字" clearable></el-input>
      </div>
      <div class="block">
        <el-date-picker prefix-icon="none" style="width: 240px" v-model="req_xin_xi.time" type="datetimerange"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </div>

      <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
      <el-button type="primary" icon="el-icon-search" @click="refresh">刷新</el-button>
    </div>

    <el-table v-loading="table_loading" :data="rolesList" style="width: 100%; margin-top: 30px" border>
      <el-table-column align="center" label="结算单编号" width="220">
        <template slot-scope='scope'>
          <div  class="link-type" @click="tiao(scope.row.statement_id)">
            {{scope.row.statement_num}}
          </div>
        </template>
      </el-table-column>

      <el-table-column align="center" label="开票金额" width="100" prop="price">
      </el-table-column>

      <el-table-column align="center" label="申请人" prop="uid_str">
      </el-table-column>

      <el-table-column align="center" label="申请时间" prop="add_time_str" width="150">
      </el-table-column>
      <el-table-column align="center" label="公司名称" prop="company_name" width="150">
      </el-table-column>
      <el-table-column align="center" label="纳税人识别号" prop="company_num" width="150">
      </el-table-column>
      <el-table-column align="center" label="备注" prop="remark">
      </el-table-column>
      <el-table-column align="center" label="操作" width="150px">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="开票" placement="top">
            <el-button type="success" size="mini" @click="handleEdit(scope)">{{
              "开票"
            }}</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="top">
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="del(scope.row.id)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <!-- 翻页组件 -->
    <div id="" class="pages">
      <el-pagination @size-change="size_change" background @current-change="current_change"
        :current-page="req_xin_xi.page" :page-sizes="[10, 20, 30, 40]" :page-size="10"
        layout="total, sizes, prev, pager, next, jumper" :total="count">
      </el-pagination>
    </div>
    <!-- 翻页组件 -->

    <el-dialog :visible.sync="dialogVisible" title="开票" center>
      <el-form ref="role" :rules="rules" :model="role" label-width="100px">
        <el-form-item label="公司名称" prop="company_name">
          <el-input v-model="role.company_name" placeholder="" />
        </el-form-item>
        <el-form-item label="发票金额" prop="price">
          <el-input type="number" v-model="role.price" placeholder="" @input="price_input" />
          <span v-show="tishi_title" style="color: red">金额大于开票金额了</span>
        </el-form-item>
        <el-form-item label="发票编号" prop="invoice_num">
          <el-input v-model="role.invoice_num" placeholder="" />
        </el-form-item>
        <!-- <el-form-item
          label="结算单id"
          v-show="dialogType === 'new' ? false : true"
        >
          <el-input v-model="role.statement_id" placeholder="" />
        </el-form-item> -->
        <el-form-item label="开票时间" prop="invoice_time">
          <el-date-picker v-model="role.invoice_time" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm"
            type="datetime" placeholder="选择日期时间" @focus="time_focus">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="市场负责人">
          <el-select clearable style="width: 150px" @change="change1" v-model="fuze_name" :filterable="true"
             placeholder="搜索负责人"
             @focus="focus">
            <el-option v-for="item in options1" :key="item.value" :label="item.real_name" :value="item.uid">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="纳税人识别号">
          <el-input class="na_shui" v-model="role.company_num" placeholder="" />
        </el-form-item>
        <el-form-item label="公司电话">
          <el-input type="number" v-model="role.company_tel" placeholder="" />
        </el-form-item>
        <el-form-item label="公司地址">
          <el-input v-model="role.company_addr" placeholder="" />
        </el-form-item>
        <el-form-item label="发票类型">
          <el-input v-model="role.invoice_type" placeholder="" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="role.remark" placeholder="" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>

      <div style="text-align: center">
        <el-button type="danger" @click="quxiao">取消</el-button>
        <el-tooltip class="item" effect="dark" content="请仔细检查输入内容,提交后无法修改,需要在结算单中取消挂接后才能修改!!!" placement="top">
          <el-button type="primary" @click="confirmRole">提交</el-button>
        </el-tooltip>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    dai_yi_list,
    del_dai_kai_piao,
    fa_piao_add,
  } from "@/api/kai_piao/fa_piao_list.js";
  import {
    get_userlist
  } from "@/api/user/get_list.js";
  export default {
    name: "kaipiao_not",
    data() {
      return {
        loading: false,
        fuze_name: '',
        options1: [],
        tishi_title: false,
        price: "",
        table_loading: false,
        button_loading: false,
        count: 0,
        time: "",
        role: {
          company_name: "",
          price: "",
          invoice_num: "",
          statement_id: "",
          invoice_time: "",
          company_num: "",
          company_tel: "",
          company_addr: "",
          invoice_type: "增值税专用发票",
          remark: "",
          market_person_uid: ''
        },
        routes: [],
        rolesList: [],
        dialogVisible: false,
        dialogType: "new",
        remove_id: "",
        req_xin_xi: {
          has_invoice: 0,
          keyword: "",
          page: 1,
          limit: 10,
          search_time: "",
        },
        rules: {
          company_name: [{
            required: true,
            message: "输入公司名称",
            trigger: "blur"
          }, ],
          price: [{
            required: true,
            message: "输入发票金额",
            trigger: "blur"
          }],
          invoice_num: [{
            required: true,
            message: "输入发票编号",
            trigger: "blur"
          }, ],
          invoice_time: [{
            required: true,
            message: "输入开票时间",
            trigger: "blur"
          }, ],
        },
      };
    },
    created() {
      this.get_list();
    },
    methods: {
      tiao(id) {
        this.$router.push({
          path: 'jiesuan_detail',
          query: {
            statement_id: id
          }
        }, )
      },
      change1(e) {
        this.role.market_person_uid = e
      },

      focus() {
        get_userlist({
          keyword: ''
        }).then((res) => {
          this.loading = false;
          this.options1 = res.data;
        });

      },
      // 获取列表
      get_list() {
        this.table_loading = true;
        this.req_xin_xi.search_time = this.time
        dai_yi_list(this.req_xin_xi).then((res) => {
          this.table_loading = false;
          this.rolesList = res.data;
          this.count = res.count;
        });
      },
      confirmRole() {
        this.$refs.role.validate((valid) => {
          if (valid) {
            fa_piao_add(this.role).then((res) => {
              this.$refs.role.resetFields();
              this.role = {
                company_name: "",
                price: "",
                invoice_num: "",
                statement_id: "",
                invoice_time: "",
                company_num: "",
                company_tel: "",
                company_addr: "",
                invoice_type: "增值税专用发票",
                remark: "",
              };
              this.$message({
                type: "success",
                message: res.msg,
              });
              this.dialogVisible = false
              this.get_list();
            });
          } else {


          }
        });
      },
      handleEdit(scope) {
        console.log(scope)
        this.fuze_name=scope.row.market_person_uid_str
        this.role.market_person_uid=scope.row.market_person_uid
        this.role.company_name = scope.row.company_name
        this.role.statement_id = scope.row.statement_id;
        this.role.company_num = scope.row.company_num
        this.role.company_tel = scope.row.company_tel
        this.role.company_addr = scope.row.company_addr
        this.role.invoice_type = scope.row.invoice_type
        this.role.price = scope.row.price;
        this.price = scope.row.price;
        this.dialogVisible = true;
      },
      size_change(e) {
        this.req_xin_xi.limit = e;
        this.get_list();
      },
      // 删除
      del(id) {
        this.remove_id = id;
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            del_dai_kai_piao({
              id: this.remove_id
            }).then((res) => {
              this.get_list();
              this.$message({
                type: "success",
                message: res.msg,
              });
            });
          })
          .catch(() => {
            this.$message({
              type: "warning",
              message: "已取消删除",
            });
          });
      },
      // 刷新
      refresh() {
        this.req_xin_xi = {
          has_invoice: 0,
          keyword: "",
          page: 1,
          limit: 10,
          search_time: "",
        };
        this.get_list();
      },
      time_focus() {},
      // 搜索
      search() {
        this.get_list();
      },
      // 翻页
      current_change(e) {
        this.req_xin_xi.page = e;
        this.get_list();
      },
      price_input(e) {
        if (Number(e) > Number(this.price)) {
          this.tishi_title = true;
        } else {
          this.tishi_title = false;
        }
      },
      quxiao() {
        this.$refs.role.resetFields();
        this.dialogVisible = false;
        this.role = {
          company_name: "",
          price: "",
          invoice_num: "",
          statement_id: "",
          invoice_time: "",
          company_num: "",
          company_tel: "",
          company_addr: "",
          invoice_type: "增值税专用发票",
          remark: "",
        };
      },
    },
  };
</script>

<style lang="scss" scoped>
  .app-container {
    .roles-table {
      margin-top: 30px;
    }

    .permission-tree {
      margin-bottom: 30px;
    }
  }

  .del {
    margin: 0;
  }

  .header {
    display: flex;
    justify-content: flex-start;
  }

  .search_input {
    width: 202px;
  }

  // 翻页组件居中
  .pages {
    display: flex;
    padding-top: 20px;
  }
</style>
